.sidebar {
  position: relative;
  top: 0;
  width: var(--sidebar-width);
  height: var(--full-height);
  position: relative;
  background-color: #F5F5F5;
}

.sidebar-header {
  //width: 40px;
  //height: 40px;
  //border-radius: 4px;
  //border: #c7c7c7 1px solid;
  //border: 4px;
  width: 30px;
  height: 30px;
  //border: #c7c7c7 1px solid;
  position: relative;
  margin: 24px auto 0;
  &:hover {
    background-color: #dcf3f7; /* 鼠标悬停时的背景颜色 */
  }

  /* 可选：激活（点击）状态的样式 */
  &:active {
    background-color: #b3bcbd; /* 按钮被点击时的背景颜色 */
  }
}

.sidebar-chat {
  width: 30px;
  height: 30px;
  position: relative;
  margin: 24px auto 0;
  &:hover {
    background-color: #dcf3f7; /* 鼠标悬停时的背景颜色 */
  }

  /* 可选：激活（点击）状态的样式 */
  &:active {
    background-color: #b3bcbd; /* 按钮被点击时的背景颜色 */
  }
}

.sidebar-role {
  width: 30px;
  height: 30px;
  position: relative;
  margin: 15px auto 0;
  &:hover {
    background-color:#dcf3f7; /* 鼠标悬停时的背景颜色 */
  }

  /* 可选：激活（点击）状态的样式 */
  &:active {
    background-color: #b3bcbd; /* 按钮被点击时的背景颜色 */
  }
}

.action-button {
  display: inline-flex;
  margin-top: 3px;
  margin-left: 5px;
}

.action-button svg {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.action-button:hover svg {
  opacity: 1;
}
.sidebar-none {
  display: none;
}
.sidebar-button-vi {
  //height: 10px;
  //width: 20px;
  //position: relative;
  background-color: #111111; /* 按钮背景颜色 */
  top: 0;
  right: 0;
  color: #ffffff; /* 文本颜色 */
  border: none; /* 去掉按钮边框 */
  border-radius: 5px; /* 圆角半径，可以根据需要调整 */
  padding: 5px 10px; /* 按钮内边距，可以根据需要调整 */
  font-size: 5px; /* 字体大小，可以根据需要调整 */
  cursor: pointer; /* 鼠标样式 */
  transition: background-color 0.3s ease; /* 添加过渡效果 */
  writing-mode: horizontal-tb; /* 将文字设置为横向排列 */
  display: flex;
  //margin-left: 30px;
  //float: right;
  //right: 0;
  /* 可选：悬停状态的样式 */
  //top: 50%; /* 上边距为页面垂直中间位置 */
  //left: 0; /* 右边距为页面最右边 */
  //transform: translateY(-50%); /* 通过 translateY 将按钮垂直居中 */
  //position: relative; /* 使用相对定位 */

  &:hover {
    background-color: #0056b3; /* 鼠标悬停时的背景颜色 */
  }

  /* 可选：激活（点击）状态的样式 */
  &:active {
    background-color: #003d80; /* 按钮被点击时的背景颜色 */
  }
}